<template>
    <div class="containers">
        <div class="divimg">
            <img :src="img1" alt="">
        </div>
        <div id="login_in">
            <div class="div1">
                <i class="iconfont">&#xe768;</i>
                <input type="text"  placeholder="请输入账号" v-model="username" v-focus>
            </div>
            <div class="div2">
                <i class="iconfont">&#xe720;</i>
                <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <div class="div3">
                <span class="span1" @click="ToLogin">立即注册</span>
                <router-link to="/">
                    <span class="span2">找回密码</span>
                </router-link>
            </div>
            <div class="sub_btn" v-on:click="login">登录</div>
        </div>
        <p class="p1">其他登录方式</p>
        <div class="qita">
            <i class="iconfont">&#xe62d;</i>
            <i class="iconfont">&#xe631;</i>
            <i class="iconfont">&#xe64c;</i>
        </div>
    </div>
</template>
<script>
import qs from "qs"
import {mapState,mapMutations } from 'vuex'
import * as mutationsType from "../store/mutations/mutations-type"//使用常量替代 Mutation 事件类型
export default {
    name:"Login",
    data(){
        return{
            img1:require('@/assets/img/11.png'),
            loginData:{
            },
            username: '',
            password: '',
        }
    },
    mounted(){
      /*页面挂载获取localStorage，如果存在username的localStorage，则跳转到主页，不需登录*/
        if(localStorage.getItem('username')){
            this.$router.push('/home/movement')
        }
    },
    methods:{
        ...mapMutations([mutationsType.UPDATE]),
        ToLogin(){
            this.$router.push('/register')
        },
        login(){
            if(this.username == "" || this.password == ""){
                  alert("请输入用户名或密码")
            }else{
                this.$axios.post(this.Denglu_Host,qs.stringify({
                    username: this.username,
                    password: this.password
                }))
                .then(res=>{
                         var content=res.data;
                        if (content.msg != "用户名密码不存在") {
                            console.log("请求成攻！ ",res.data);
                            this[mutationsType.UPDATE](this.username)
                            localStorage.setItem("username",this.username)
                            setTimeout(function(){
                                this.$router.push('/home/movement')
                            }.bind(this),1000)
                        }else{
                            console.log("请求失败!",);
                            alert("账户密码错误！");
                        }
                
                })
                .catch(error=>new Error(error))
            }
        }
    }
}
</script>
<style lang="less" scoped>
.containers{
    background-color: #171818;
    overflow: hidden;
    .divimg{
        margin-top: 80px;
        margin-left: 110px;
    }
    .div1{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 50px;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
    }
    .div2{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 10px;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
    }
    .div3{
        margin-top: 15px; 
        .span1{
            display: inline-block;
            margin-left: 60px;
            color:#757575;
            letter-spacing: 1px;
        }
        .span2{
            display: inline-block;
            margin-left: 120px;
            color:#757575;
            letter-spacing: 1px;
        }
    }
    .sub_btn{
        width: 270px;
        height: 50px;
        background-color: #Fddf05;
        color:#171818;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 4px;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        margin-left: 50px;
        margin-top: 30px;
    }
    .p1{
        width: 120px;
        margin-left: 130px;
        margin-top: 50px;
        color:#757575;
        letter-spacing: 1px;
    }
    .p1::before{
        content: "";
        width: 68px;
        height: 2px;
        background-color: #757575;
        display: block;
        position: absolute;
        bottom:105px;
        left: 58px;
    }    
    .p1::after{
        content: "";
        width: 68px;
        height: 2px;
        background-color: #757575;
        display: block;
        position: absolute;
        bottom:105px;
        left: 236px;
    }
    .qita{
        width: 270px;
        height: 50px;
        margin-left: 50px;
        line-height: 50px;
        margin-top: 10px;
        margin-bottom: 38px;
        i:first-child{
            float: left;
            font-size: 40px;
            color:#fff;
        }
        i:nth-child(2){
            margin-left: 75px;
            color:#fff;
            font-size: 40px;
        }
        i:last-child{
            float: right;
            font-size: 40px;
            color:#fff;
        }
    }    
}
</style>